import React, { useEffect, useMemo, useRef } from "react";
import { Modal, Toast } from "antd-mobile";
import PropTypes from "prop-types";
// import { fields } from "./projTypeId-fields";
import Form from "../components/form";
import axios from "src/api/index";
import * as dayjs from "dayjs";

const EditForm = props => {
    const { visible, visibleCb, row, projTypeId, editType, state, formDisabled, fields } = props;
    const formRef = useRef(null);

    const confirm = async () => {
        const form = formRef.current?.form;
        const values = form.getFieldsValue();
        try {
            await form.validateFields(values);
        } catch (error) {
            if (error.errorFields.length) {
                Toast.show({
                    icon: "fail",
                    content: error.errorFields[0].errors[0],
                });
                return;
            }
        }
        for (let k in values) {
            const field = values[k];
            if (Object.prototype.toString.call(field) === "[object Date]") {
                values[k] = dayjs(field).format("YYYY-MM-DD");
            }
        }
        axios({
            method: "post",
            url: `/pqsstartWkInSetTest_${editType}`,
            data: {
                ...row,
                ...values,
            },
        }).then(res => {
            if (res.success) {
                visibleCb(true);
            } else {
                Toast.show({
                    icon: "fail",
                    content: res.msg,
                    duration: 1000,
                });
            }
        });
    };

    useEffect(() => {
        if (visible) {
            const form = formRef.current?.form;
            const formFields = fields[projTypeId];
            let formData = {};
            formFields.forEach(field => {
                const name = field.name;
                if (field.type === "date") {
                    formData[name] = row[name] && dayjs(row[name]).toDate();
                } else {
                    formData[name] = row[name];
                }
            });
            form.setFieldsValue(formData);
        }
    }, [visible]);

    return (
        <Modal
            visible={visible}
            content={
                <Form
                    ref={formRef}
                    formItems={fields[projTypeId]}
                    options={sexOpt}
                    state={state}
                    formDisabled={formDisabled}
                />
            }
            closeOnAction={false}
            onClose={visibleCb}
            getContainer={false}
            bodyClassName="edit-form"
            actions={[
                {
                    key: "confirm",
                    text: "确认",
                    onClick: confirm,
                },
                {
                    key: "cancel",
                    text: "取消",
                    onClick: () => visibleCb(true),
                },
            ]}
            forceRender={true}
        />
    );
};

EditForm.propTypes = {
    row: PropTypes.object,
    visible: PropTypes.bool,
    visibleCb: PropTypes.func,
    projTypeId: PropTypes.number,
    editType: PropTypes.oneOf(["add", "edit"]),
    state: PropTypes.object,
    formDisabled: PropTypes.bool,
    fields: PropTypes.object,
};

const sexOpt = [
    {
        label: "男",
        value: "男",
    },
    {
        label: "女",
        value: "女",
    },
];

export default EditForm;
